<template>

	<view class="container backgroundlinear">
        
		<u-navbar :is-back="false" title="" class="flex ">
            <button open-type="share" id="110" style="background: #fff;margin: 0;    line-height: 64rpx;">
					<img src="http://mzd-admin.muzhandao.com/api/uploads/image/20240911/3ceee2b1-aa62-47de-8584-8791ba9f3c60.png"
						alt="" srcset="" style="width: 30rpx;height: 30rpx;" />
				</button>
			<!-- #ifdef MP -->
			<view class="navbar mp_navbar flex ml-[20rpx] pl-[20rpx]" @click="goPage('http://mzd-admin.muzhandao.com/api/uploads/image/20240911/6e172ace-e90c-46cb-b09f-19a88278deec.png')" style="background-color: #rgba(249, 249, 249, 1);">
             <u-icon name="search" size="34" color="#8456FF"></u-icon>
				<text class="flex items-center ml-[20rpx]" style="color: rgba(34, 34, 34, 0.40);font-size: 18rpx;">请输入关键词搜索</text>
			</view>
             <!-- #endif -->
			<!-- #ifdef H5 -->
			<view class="navbar h5_navbar flex ml-[20rpx] pl-[20rpx]" @click="goPage('http://mzd-admin.muzhandao.com/api/uploads/image/20240911/6e172ace-e90c-46cb-b09f-19a88278deec.png')" style="background-color: #rgba(249, 249, 249, 1);">
                 <u-icon name="search" size="34" color="#8456FF"></u-icon>
				<text class="flex items-center ml-[20rpx]" tyle="color: rgba(34, 34, 34, 0.40);font-size: 18rpx;">请输入关键词搜索</text>
			</view>
                 <!-- #endif -->
					

				
		</u-navbar>

		<view class="flex main">
			<view class="content">
				<scroll-view scroll-y="true" class="menu text_color text_color_class">
					<block v-for="(item, index) in categoryData" :key="item.id">
						<view class="truncate menu--item" :class="{'text-primary2': index === current}"
							@click="current = index">
							{{ item.name }}
						</view>
					</block>
				</scroll-view>
				<view class="layout">
					<z-paging ref="paging" v-model="categoryData" @query="queryList" :fixed="false" height="100%"
						:loading-more-enabled="false">
						<!-- Content Start -->
						<view class="content-box">
							<block v-for="(item2, index2) in categoryData" :key="item2.id" style="width:100px;">
								<template v-if="index2 == current && !item2?.sons?.length">
									<cate-card :param="item2"></cate-card>
								</template>
								<template v-if="index2 == current && item2?.sons?.length">
									<!-- <view class="content-box_item" v-for="(item3, index3) in item2.sons" :key="item3.id">
										<span>{{item3.name}}</span>
									</view> -->
									<block v-for="(item3, index3) in item2.sons" :key="item3.id">
										
										<cate-card :param="item3" :pid="item2.id"></cate-card>
									</block>
								</template>
							</block>
						</view>
						<!-- Content End -->
					</z-paging>
				</view>
			</view>
		</view>

		<!-- 底部导航栏 -->
		<Tabbar />
	</view>

</template>

<script lang="ts" setup>
	import { ref, shallowRef } from "vue"
	import CateCard from "./components/cate-card.vue"
	import Tabbar from "@/components/tabbar/tabbar.vue"
	import { apiGoodsCategoryLists, apiGoodsCategoryLists2 } from '@/api/store'

	import { onLoad } from '@dcloudio/uni-app'
	import { USER_ID } from '@/enums/cacheEnums'
	import cache from '@/utils/cache'
	import { useUserStore } from '@/stores/user'


	import { getuserSalesman } from '@/api/account'
	const categoryData = ref<Array<any>>([])
	const categoryData22 = ref<Array<any>>([])
	const current = ref<number | null>(0)
	const paging = shallowRef()
	const user_id = ref<number>(0)

	const userStore = useUserStore()

	const baseUrl = `${import.meta.env.VITE_APP_BASE_URL || ''}/`
	const queryList = async (pageNo : number, pageSize : number) => {
		try {
			const data = await apiGoodsCategoryLists()
			let data2 = null;

			try {
				if (user_id.value) {
					data2 = await apiGoodsCategoryLists2({ id: user_id.value })
				} else {
					data2 = await apiGoodsCategoryLists2()
				}
			} catch (e) {

			}
			const data_str = []
			if (data2 != null) {
				data2.forEach(i => {
					i.image = baseUrl + "api/uploads/" + i.image

					data_str.push(i)
				})
				data.push({
					createTime: "2024-03-06 17:09:51",
					id: 96,
					image: "http://localhost:8083/api/uploads/image/20240330/313180fb-69ee-46b8-ab92-63f4ff1042f5.png",
					isRecommend: 1,
					isRecommendName: "推荐",
					isShow: 1,
					isShowName: "显示",
					level: 0,
					name: "优惠码专区",
					pid: 0,
					sonGoodsList: null,
					sort: 10,
					updateTime: "2024-03-30 17:14:29",
					// sons:data_str
					sons: [{ name: '优惠码专区', id: 1, sons: data_str }]
				})
			}

			paging.value.complete(data)
		} catch (e) {
			console.log('报错=>', e)
			//TODO handle the exception
			paging.value.complete(false)
		}
	}

	const goPage = (url : string) => {
		uni.navigateTo({
			url: url
		})
	}
	// const onShareAppMessage = (res:any)=> {
	// 	console.log(res,'resres')
	//   let pages = getCurrentPages(); //获取当前页面栈的信息
	//   let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
	//     if (res.from === 'button') {// 来自页面内分享按钮
	//       console.log(res.target,'res.target')
	//     }
	// 	let pathUrl=currentPage.route + `?idd=1111`
	// 	console.log(pathUrl,'pathUrl');
	//     return {
	//       title: '自定义分享标题',
	//       path:pathUrl  //后面是路径上要传递的参数
	//     }
	//   }

	onLoad(async (options) => {
		let pages = getCurrentPages()
		let currentPage = pages[pages.length - 1]; //获取到当前页面栈中最后一个页面的索引
		if (options.id) {
			cache.set("tuixiaoy", options.id)
			user_id.value = Number(options.id)
		}
		if (userStore.isLogin && options.id != undefined) {
			getuserSalesman(options.id);
		}
		console.log(options, 'optionsoptions1');
		console.log(pages, 'optionsoptions1');
		console.log(currentPage, 'optionsoptions1');
	})
</script>

<style lang="scss">
	.container {
		display: flex;
		height: 100vh;
		overflow: hidden;
		flex-direction: column;
        .navbar.mp_navbar{
           text{
                font-size: 24rpx!important;
                color:rgba(34, 34, 34, 0.40);
            }
        }
       
		.mp_navbar {
			width: 440rpx;
		}

		.h5_navbar {
			width: 610rpx;
		}

        .truncate{
            margin: 0 10rpx;
            border-radius: 16rpx;
            margin-bottom: 20rpx;
        }

		.navbar {
			height: 64rpx;
			color: #C5C5C5;
			border-radius: 60rpx;
			font-size: 28rpx;
			background-color: #f2f2f2;
		}

		.main {
			flex: 1;
			min-height: 0;
			overflow: scroll;

			::-webkit-scrollbar {
				display: none;
			}


			.content {
				width: 100%;
				height: 100%;
				display: flex;

				.layout {
					width: 100%;
				}

				// 左侧菜单分类
				.menu {
					width: 230rpx;
					height: 100%;
					padding-top: 10rpx;
					margin-right: 20rpx;
					background: #fff;
					box-sizing: border-box;

					&--item {
						height: 88rpx;
						line-height: 88rpx;
						text-align: center;
						font-size: 26rpx;
					}
				}

				// 右侧内容
				.content-box {
					width: 100%;
					height: 100%;
					padding: 24rpx 24rpx 0 0;

					.content-box_item {
						width: 30% !important;
					}
				}
			}
		}
	}

	.text-primary2 {
		color: #fff;
		// background-color: rgb(243,244,246)
		background-color: #8456FF !important;
	}

    .text_color_class{
        background-color: #fff!important;
    }

    .backgroundlinear {
        background-color: #F4F4F4 !important;
    }

   
    .u-navbar-inner,.u-slot-content{
        align-items:normal !important;
       
    }
    .u-slot-content{
        padding-top: 10rpx;
    }
</style>